{% extends "base.html" %}


{% block title %}
<title>晋哆咕-晋</title>
{% endblock %}


{% block css %}
<style>
    body {
        background-image: url("/static/img/mainbg.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }
    .container {
        margin-top: 100px;
    }
    .img-recommend {
        width: 200px;
        height: 300px;
    }
    .img-recommend+span {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
        padding: 5px 0;
        bottom: -28px;
    }
    .list-group-item {
        display: inline-block;
    }
    .recommend img {
        width: 200px;
        height: 100px;
    }
    .function-bar {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 999;
    }
    .back-to-top-btn {
        color: white;
        padding: 10px 15px;
        border-radius: 5px;
        cursor: pointer;
        margin-bottom: 10px;
    }
    .night-mode-switch {
        background-color: #444;
        color: white;
        padding: 10px 15px;
        border-radius: 5px;
        cursor: pointer;
    }
    .fishing-mode-btn {
        background-color: #009688;
        color: white;
        padding: 10px 15px;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
{% endblock %}


{% block body %}
<span class="recommend"><img src="/static/img/recommend.png" alt=""></span>
<ul class="list-group items">

</ul>
<hr>
<div class="can">
    <ul class="list-group">
        {% for c in cs %}
            <li class="col-2">
                <h2 style="color: hotpink">♨{{ c.title }}</h2>
                {% for book in books %}
                    {% if book.category == c %}
                        <li class="list-group-item">
                            <a href="/detail/{{ book.id }}">✿{{ book }}</a>
                        </li>
                    {% endif %}
                {% endfor %}
            </li>
            <hr>
        {% endfor %}
    </ul>
</div>
<div class="function-bar">
    <span class="back-to-top-btn"><img src="/static/img/back-top.png" alt=""></span>
    <button class="night-mode-switch">未完成</button>
</div>

{% endblock %}


{% block js %}
<script>
    function recommend(){
        $.ajax({
                url: "change_recommend",
                method: "get",
                success: function(data){
                $(".items").empty();
                for(let i=0; i< data.data.length; i++){
                    $(".items").append(`
                        <li class="list-group-item">
                            <a href="/detail/${data.data[i].book_id}">
                                <img class="img-recommend" src="${data.data[i].book_img}" alt="">
                                <span>${data.data[i].book_title}</span>
                            </a>
                        </li>
                    `)
                }
                },
            })
    }
    $(function(){
        recommend();
        $(".recommend").click(function(){
            recommend();
        })
    })
    document.querySelector('.back-to-top-btn').addEventListener('click', function () {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
    });
</script>
{% endblock %}
